import React from 'react';
import PropTypes from 'prop-types';
import './index.css';
export default class TodoList extends React.Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    done: PropTypes.bool.isRequired,
    updateTodo: PropTypes.func.isRequired,
    delTodo: PropTypes.func.isRequired
  };

  changeCheck = e => {
    const {
      target: { checked }
    } = e;
    const { id, updateTodo } = this.props;
    updateTodo(id, checked);
  };
  handleDelete = () => {
    const { id, delTodo } = this.props;
    delTodo(id);
  }
  render() {
    const {name, done } = this.props;
    return (
      <li className="item-box">
        <label>
          <input type="checkbox" name="" id="" checked={done} onChange={this.changeCheck} className="check-box" />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" onClick={this.handleDelete}>删除</button>
      </li>
    );
  }
}
